<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!--准备好一个"容器"-->





    <div id="test"></div>

    <!--引入库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">

        /*
        
            (1)react/vue中的key有什么作用? (key的内部原理是什么)
            (2)为什么遍历列表时，key最好不要用index?

            1.虚拟DOM中key的作用:



        */
       /*1.逆序添加、逆序删除等破坏顺序的操作
       
            2.页面包含输入类的DOM
       */
        class Person extends React.Component {

            state = {
                person: [
                    { id: 1, name: '铃鹿御前', age: 190 },
                    { id: 2, name: '烟烟罗', age: 12 }
                ]
            }


            add = () => {
                const { person } = this.state;
                const p = { id: person.length + 1, name: '源九郎狐', age: 555 };
                this.setState({ person: [p, ...person] });
            }


            render() {
                return (
                    <div>
                        <h1>仓库</h1>
                        <button onClick={this.add}>点击新增式神</button>


                        <h3>使用index作为key</h3>
                        <ul>
                            {
                                this.state.person.map((item, index) => {
                                    return <li key={index}>{item.name}-----{item.age}<input type="text"/></li>
                                })
                            }
                        </ul>

                        <h3>-----------------------</h3>


                        <h3>使用id作为key</h3>
                        
                        <ul>
                            {
                                this.state.person.map((item) => {
                                    return <li key={item.id}>{item.name}-----{item.age}<input type="text"/></li>
                                })
                            }
                        </ul>

                    </div>
                )
            }
        }
        ReactDOM.render(<Person />, document.getElementById('test'));
    </script>

</body>

</html>